<template>
  <div>
    <ComHeader title="绑定手机" leftArrow="true"/>

    <!-- 已绑定账号的界面 ，需要有缓存数据，并且绑定手机为true-->
    <div class="container" v-if="ethelWxUserInfo && ethelWxUserInfo.is_bind_phone">
      <div class="container-bj">
        <div class="userInfo">
          <img :src="ethelWxUserInfo.headimgurl">
          <p class="nickname">{{this.ethelWxUserInfo.nickname}}</p>
          <p class="level">{{this.ethelWxUserInfo.level}}</p>
          <p class="bangding">您已绑定：{{this.ethelWxUserInfo.username}}</p>
        </div>
      </div>
    </div>

    <!-- 未绑定账号的，注册界面 -->
    <div class="register" v-else>
      <div class="forms">
        <div class="bg">
          <!-- <img class="max" src="../../../static/img/slfn-logo.jpg" alt> -->
        </div>
        <div class="form-group">
          <div class="form-name">手机号：</div>
          <div class="form-value">
            <input
              type="number"
              name
              value
              v-model="userPhone"
              placeholder="请输入手机号"
              @blur.prevent="changeCount()"
            >
          </div>
        </div>
        <div class="form-group">
          <div class="form-name">验证码：</div>
          <div class="form-value">
            <input type="text" name value v-model.trim="userCode" placeholder="请输入验证码">
            <div class="btn-code" @click="clickSendCode()">
              <span v-show="show">获取验证码</span>
              <span v-show="!show" class="count">{{count}}s后重新发送</span>
            </div>
          </div>
          <div class="tuijian" v-if="showtuijian">
            <div class="form-name">推荐人：</div>
            <div class="form-value">
              <input type="number" name value v-model="tuijianren" placeholder="请输入推荐人ID">
            </div>
          </div>
        </div>
        <div class="submit-btn">
          <mt-button @click="clickSubmit()" type="primary" size="normal">立即绑定</mt-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/fetch/api";
import { Toast, Button } from "mint-ui";
import ComHeader from "@/common/ComHeader";
const TIME_COUNT = 60;
export default {
  name: "register",
  components: {
    Toast,
    Button,
    ComHeader
  },
  data() {
    return {
      userPhone: null, // 输入手机号码
      userCode: null, // 验证码
      formData: {
        phone: "", // 电话号码
        code: "" // 验证码
      },
      show: true, // 是否显示获取验证码
      count: "", // 倒计时秒数
      timer: null, // 设置倒计时时间
      ethelWxUserInfo: null, // 获取用户信息
      yanzheng: false, // 验证手机号码是否合法
      tuijianren: "", // 推荐人id
      showtuijian: true, // 是否显示推荐人
      chongzhi: false // 重置时间倒数
    };
  },
  created() {
    //获取缓存的用户信息，判断显示那个页面
    this.ethelWxUserInfo = this.getlocalStorage(this.companyUnique);
    // 第二页面，判断是否显示推荐人表单，参数uid（自己的ID）
    let params1 = {
      uid: this.ethelWxUserInfo.id
    };
    api.getMySuperior(params1).catch(error => {
      if (error.data.id) {
        this.showtuijian = false;
      }
    });
  },

  methods: {
    //  1、手机号输入，失去焦点，验证手机号
    changeCount() {
      this.chongzhi = false;
      this.yanzheng = false;
      // 验证手机号是否合法
      if (!/^1[3456789]\d{9}$/.test(this.userPhone)) {
        this.yanzheng = false;
        // 不合法的提示信息
        if (this.userPhone != null) {
          Toast({
            message: "手机号码有误，请重填",
            position: "middle",
            duration: 1000
          });
          this.chongzhi = true;
        }
      } else {
        // 合法，进入下一步
        this.yanzheng = true;
      }
      // ！！！！！！！！！！！！！发起请求，查找本手机是否已注册过用户，如果已注册，拦截，并重新输入 ，后期优化
    },

    //  2、点击获取验证码的按钮
    clickSendCode(formData) {
      // 手机号合法，才往下执行
      if (this.yanzheng) {
        // 发送验证码的api
        const params2 = {
          purpose: "2",
          phone: this.userPhone,
          uid: this.ethelWxUserInfo.id
        };
        api.entrySendcode(params2).catch(error => {
          Toast(error.data.msg);
          if(error.data.code == 0){
            if (!this.timer) {
              this.count = TIME_COUNT;
              this.show = false;
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  // 如果失败，立即重置验证码按钮
                  if (this.chongzhi == true) {
                    this.show = true;
                    clearInterval(this.timer);
                    this.timer = null;
                  }
                  this.count--;
                } else {
                  this.show = true;
                  clearInterval(this.timer);
                  this.timer = null;
                }
              }, 1000);
            }
          }

        });
      } else {
        // 没有输入手机号时，点击验证码的提示信息
        Toast({
          message: "请填写手机号码",
          position: "middle",
          duration: 1000
        });
      }
    },

    //  3、立即绑定的按钮
    clickSubmit() {
      if (!this.userPhone) {
        Toast("请填写手机号码");
      } else if (!this.userCode) {
        Toast("请填写验证码");
      } else {
        // 获取本地缓存
        var userInfo = JSON.parse(localStorage.getItem(this.companyUnique));
        // 绑定手机的请求
        // 根据是否填推荐人，配置不同的params
        if (this.showtuijian == true) {
          var params3 = {
            phone: this.userPhone,
            authCode: this.userCode,
            uid: userInfo.id,
            parent_id: this.tuijianren
          };
        } else {
          var params3 = {
            phone: this.userPhone,
            authCode: this.userCode,
            uid: userInfo.id
          };
        }
        api.bindingPhone(params3).catch(error => {
          console.log(error.data.msg);

          Toast({
            message: error.data.msg,
            position: "middle",
            duration: 1000
          });
          if (error.data.msg == "绑定成功") {
            // 重置本地缓存wxUserInfo
            userInfo.is_bind_phone = true;
            userInfo.username = this.userPhone;
            this.setlocalStorage(this.companyUnique, userInfo);
            // 跳转页面
            setTimeout(() => {
              this.$router.push("/my");
            }, 400);
          }
        });
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.register {
  padding: 0.6rem;
  border-top: 1px solid #ddd;
  padding-top: 0;
  background-color: #fff;
  height: 17rem;

  .bg {
    padding-top: 2rem;
    padding-bottom: 0.4rem;
  }
}

.form-group {
  overflow: hidden;
  padding: 0.3rem 0;
  border-bottom: 1px solid #eee;

  .form-name {
    float: left;
    width: 20%;
    line-height: 1.2rem;
  }

  .form-value {
    float: right;
    width: 80%;
    line-height: 1.2rem;
    position: relative;

    .btn-code span {
      background-color: #26a2ff;
      position: absolute;
      right: 0;
      top: 0.1rem;
      display: block;
      text-align: center;
      color: #fff;
      border-radius: 0.2rem;
      font-size: 0.36rem;
      line-height: 1rem;
      padding: 0 0.3rem;
    }

    .btn-code .count {
      background-color: #ddd;
    }
  }

  input {
    border: none;
    /* border: 1px solid #ddd; */
    width: 94%;
    padding: 0.2rem;
  }
}

.agree {
  margin-top: 20px;

  span {
    display: inline-block;
  }

  .agree-name {
    vertical-align: middle;
  }

  .agree-value {
    vertical-align: middle;
    color: #26a2ff;
  }
}

.false {
  background-color: #999;
}

.tips {
  color: #c5575a;
  padding-top: 0.4rem;
  font-size: 0.36rem;
}

.submit-btn {
  padding-top: 0.6rem;

  .mint-button--primary {
    width: 100%;
  }
}

.container {
  width: 100%;
  height: 7rem;
  position: absolute;
  top: 1.45rem;

  .container-bj {
    width: 100%;
    height: 100%;
    background: url('/static/img/bj.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    img {
      width: 2.3rem;
      height: 2.3rem;
      border-radius: 50%;
    }

    span {
      color: #ffffff;
      font-size: 0.5rem;
    }

    p {
      font-size: 0.35rem;
      color: #ffffff;
    }

    // 用户信息
    .userInfo {
      text-align: center;

      .nickname {
        font-size: 0.46rem;
        padding: 0.2rem 0;
      }

      .level {
        font-size: 0.46rem;
      }

      .bangding {
        padding: 0.3rem 0;
        font-size: 0.46rem;
      }
    }
  }
}

.tuijian {
  margin-top: 55px;
  border-top: 1px solid #eee;
  padding-top: 10px;
}
</style>
